<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>set menu</title>
    <script src="/static/js/jquery.min.js"></script>
    <link href="/static/css/alert.css" rel="stylesheet">
    <link href="/static/css/css.css" rel="stylesheet">
    <style>
        .an-button-list{
            width: 100%;
            height: 35px;
            display: flex;
            align-self: end;
            justify-items: center;
        }
        .an-button,
        .an-buttoned{
            margin-right:4px;
            margin-top: 10px;
            width: 110px;
            height: 35px;
            border: 1px solid #fff;
            border-radius: 5px 5px 0px 0px;
            border-bottom: none;
            text-align: center;
            overflow: hidden;
        }
        .an-button a,
        .an-buttoned a{
            height: 35px;
            line-height: 35px;
            display: block;
        }
        .an-button a{
            color: #fff;
        }
        .an-button:hover a{
            color:red;
            background-color: #1dddd1;
        }
        .an-button{
            background-color: #4b99ff;
        }
        .an-buttoned{
            background-color: #d8fc57;
        }
        .an-buttoned a{
            color: #999;
        }
        .message {  
            display: none;
            position: fixed;
            top:10%;
            left:50%;
            margin-left:-300px;
            width: 620px;
            background-color: #fff;  
            padding: 20px;  
            border-radius: 5px;  
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1001;
        }
        .message div{
            width: 100%;
            background-color: #fff;
            height: 150px;
            /* margin: 10px auto; */
            /* border-bottom: 1px solid #eee; */
            text-align: center;
        }
        .message div span{
            width: 80px;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            text-align: left;
        }
        .message div input{
            display: inline-block;
            width: 300px;
            height: 30px;
            line-height: 30px;
            text-indent: 5px;
        }
        .message div:nth-last-child(1){
            border: none;
        }
        .message div a{
            background-color: #4b99ff;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 5px;
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            padding:5px;
            margin: 0px 5px;
            text-align: center;
        }
        .keywords-list{
            width: 100%;
            background-color: #fff;
            padding-bottom: 30px;
        }
        .keywords-list .keywords-list-info,
        .keywords-list .keyword-button,
        .keywords-list .keywords-amount-button{
            width: 95%;
            margin: 15px auto;
        }
        .keywords-list .keywords-list-info div{
            min-height: 50px;
            /* border: 1px solid #eee; */
        }
        .keywords-list .keywords-list-info div input{
            display: inline-block;
            width: 120px;
            height: 25px;
            line-height: 25px;
            margin: 5px;
        }
        .keywords-list .keywords-list-info div label {
            display: inline-block;
            margin: 5px;
        }
        .keyword-button a{
            display: block;
            margin: 5px;
            padding:5px 10px;
            color: #fff;
            width:60px;
            text-align: center;
            background-color: #1accee;
        }
        .keywords-list .keywords-amount-button a{
            float: right;
            padding:5px;
            border: 1px solid #1accee;
            color: #fff;
            background-color: #1accee;
        }
    </style>
    <script>
        var id = 0
            list = [],
            keyword_list = [],
            message = {};
        function but_setmenu(aid){
            $.ajax({
                url:'/index/keyword/setmenu?id=' + aid,
                type: 'GET', // 请求类型，可以是 'GET' 或 'POST'  
                data:{},
                dataType: 'json', // 预期服务器返回的数据类型  
                success: function(res) {
                    if(res.code == 200){
                        message = res.data;
                        let buttons = document.getElementsByName('an-buttons');
                        for (let index = 0; index < buttons.length; index++) {
                            buttons[index].className = 'an-button';
                        }
                        if (!list.includes(res.data.id)){
                            list.push(res.data.id);   
                            let string = '<div class="an-buttoned" id="button' + res.data.id + '" name="an-buttons">';
                            string += '<a href="javascript:setmenu_data(' + res.data.id + ');">';
                            string += res.data.name;
                            string += '</a></div>';
                            document.getElementById('button-list').innerHTML += string;
                        }
                        setmenu_data(res.data.id);
                    }
                }
            }); 
        }

        function setmenu_data(aid){
            let buttons = document.getElementsByName('an-buttons');
            for (let index = 0; index < buttons.length; index++) {
                console.log(buttons[index]);
                buttons[index].className = 'an-button';
            }
            document.getElementById('button' + aid).className = 'an-buttoned';
            document.getElementById('setmenu-page').style = 'display:none';
            document.getElementById('setmenu-buy').style = 'display:block';
            document.getElementById('sreach_list').style = 'display:block';
            $.ajax({
                url:'/index/keyword/setmenu?id=' + aid,
                type: 'GET', // 请求类型，可以是 'GET' 或 'POST'  
                data:{},
                dataType: 'json', // 预期服务器返回的数据类型  
                success: function(res) {
                    let data = res.data;
                    let i = 0,
                        str = '',
                        string = '';
                    message = res.data;
                    // document.getElementById('fuci-number').innerText = '(0/' + data.fuci + ')';
                    // document.getElementById('zhuci-number').innerText = '(0/' + data.zhuci + ')';
                    for(i = 0;i < data.zhuci;i++){
                        string += '<input type="text" name="zhuci-keyword">';
                    }
                    for(i = 0;i < data.fuci;i++){
                        str += '<input type="text" name="fuci-keyword">';
                    }
                    document.getElementById('zhuci-number').innerHTML = string;
                    document.getElementById('fuci-number').innerHTML = str;
                    document.getElementById('baidu').checked = false;
                    document.getElementById('douding').checked = false;
                    document.getElementById('total-price').innerText = 0;
                }
            });
        }

        function setmenu_page(){
            let buttons = document.getElementsByName('an-buttons');
            for (let index = 0; index < buttons.length; index++) {
                buttons[index].className = 'an-button';
            }
            document.getElementById('button-1').className = 'an-buttoned';
            document.getElementById('setmenu-page').style = 'display:block';
            document.getElementById('setmenu-buy').style = 'display:none';
            document.getElementById('sreach_list').style = 'display:none';
        }

        function setmenu_add(){
            id = 0;
            block_mask_show();
            document.getElementById('piao').style = 'display:block';
            sname.value = '套餐一';
            zhuci.value = '0';
            fuci.value = '0';
            price.value = '0';
        }

        function setmenu(){
            console.log(sname);
            $.ajax({
                url:'/index/keyword/setmenu?id=' + id,
                type: 'POST', // 请求类型，可以是 'GET' 或 'POST'  
                data:{
                    name:sname.value,
                    zhuci:zhuci.value,
                    fuci:fuci.value,
                    price:price.value
                },
                dataType: 'json', // 预期服务器返回的数据类型  
                success: function(res) {
                    if(res.code == 200){
                        location.reload();
                    }
                }
            });    
        }

        function set_setmenu(aid){
            id = aid;
            $.ajax({
                url:'/index/keyword/setmenu?id=' + aid,
                type: 'GET', // 请求类型，可以是 'GET' 或 'POST'  
                data:{},
                dataType: 'json', // 预期服务器返回的数据类型  
                success: function(res) {
                    if(res.code == 200){
                        console.log(res.data);
                        block_mask_show();
                        document.getElementById('piao').style = 'display:block';
                        const data = res.data;
                        sname.value = data.name;
                        zhuci.value = data.zhuci;
                        fuci.value = data.fuci;
                        price.value = data.price;
                    }
                }
            });    
        }

        function del_setmenu(aid){
            $.ajax({
                url:'/index/keyword/setmenu?did=' + aid,
                type: 'GET', // 请求类型，可以是 'GET' 或 'POST'  
                data:{},
                dataType: 'json', // 预期服务器返回的数据类型  
                success: function(res) {
                    if(res.code == 200){
                       location.reload();
                    }
                }
            });    
        }

    </script>
</head>
<body>
    <div class="message" id="piao">
        <div>
            <label for="name">
                <span>名称</span>
                <input id="sname" type="text" value="套餐一号">
            </label>-
        </div>
        <div>
            <label for="zhuci">
                <span>主词数量</span>
                <input id="zhuci" type="number" value="0">
            </label>
        </div>
        <div>
            <label for="fuci">
                <span>副词数量</span>
                <input id="fuci" type="number" value="0">
            </label>
        </div>
        <div>
            <label for="price">
                <span>金额</span>
                <input type="number" id="price" value="0">
            </label>
        </div>
        <div>
            <a href="javascript:setmenu();">确定</a>
            <a href="javascript:hiddenmsg();">取消</a>
        </div>
    </div>
    <div class="main" id="main">
        <div class="an-button-list" id="button-list">
            <div class="an-buttoned" id="button-1" name="an-buttons">
                <a href="javascript:setmenu_page();">
                    套餐列表
                </a>
            </div>
            {eq name="is_bool" value="1"}
            <div class="an-button" id="button-2" name="an-buttons">
                <a href="javascript:setmenu_add();">
                    添加套餐
                </a>
            </div>
            {/eq}
        </div>
        <div class="search-data" id="sreach_list" style="display:none">
            <!-- <div class="search-div" style="width: 445px;height: 55px;line-height: 55px;">
                <label for="keyword">关键词:</label>
                <input type="text" id="keyword" placeholder="多个关键词用逗号隔开">
                <a href="javascript:;" onclick="get_keyword()">搜索</a>
            </div> -->
        </div>
        <div class="order-page" id="setmenu-page">
            <table class="order-page-table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>金额</th>
                        <th>主词数量</th>
                        <th>副词数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="order-list">
                    {volist name="list" id="value"}
                    <tr>
                        <td>
                            {$value.name}
                        </td>
                        <td>
                            {$value.price}
                        </td>
                        <td>
                            {$value.zhuci}
                        </td>
                        <td>
                            {$value.fuci}
                        </td>
                        <td>
                            <a href="javascript:but_setmenu({$value.id});">购买</a>
                            {eq name="is_bool" value="1"}
                            <a href="javascript:set_setmenu({$value.id});">修改</a>
                            <a href="javascript:del_setmenu({$value.id});">删除</a>
                            {/eq}
                        </td>
                    </tr>
                    {/volist}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="8">
                            <div class="page">
                                {$list|raw}
                            </div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div class="keywords-list" id="setmenu-buy" style="display: none;">
            <div class="keywords-list-info">
                <span>
                    主词
                </span>
                <div id="zhuci-number">
                </div>
                <!-- <div id="zhuci-list"></div> -->
            </div>
            <div class="keywords-list-info">
                <span>
                    副词
                </span>
                <div id="fuci-number">
                </div>
                <!-- <div id="fuci-list"></div> -->
            </div>
            <div class="keywords-list-info">
                <label for="baidu" onclick="set_amount()">
                    <input type="checkbox" id="baidu" value="baidu" name="keyword_area">百度
                </label>
                <label for="douding" onclick="set_amount()">
                    <input type="checkbox" id="douying" value="douying" name="keyword_area">抖音
                </label>
            </div>
            <div class="keyword-button">
                <a href="javascript:cisubmit();">检测</a>
            </div>
            <!-- <div class="keywords-list-info">
                <span>行业词</span>
                <div id="hangyeci-list"></div>
            </div>
            <div class="keywords-list-info">
                <span>热门词</span>
                <div id="remenci-list"></div>
            </div> -->
            <div class="keywords-amount-button">
                <span>
                    价格<b id="total-price">0</b>
                </span>
                <a href="javascript:setmenu_order_create();">
                    购买
                </a>
            </div>
        </div>
    </div>
</body>
<script src="/static/js/base.js"></script>
<script>
    var sname = document.getElementById('sname'),
        zhuci = document.getElementById('zhuci'),
        fuci = document.getElementById('fuci'),
        price = document.getElementById('price'),
        zzzz = [];
    function cisubmit(){
        let i = 0,
            is_bool = true,
            is_douying = false,
            keyword = [],
            zhuci_array = [],
            fuci_array = [],
            zhuci_keyword = document.getElementsByName('zhuci-keyword'),
            fuci_keyword = document.getElementsByName('fuci-keyword'),
            area = document.getElementsByName('keyword_area');
        for(i = 0;i < zhuci_keyword.length;i++){
            if(zhuci_keyword[i].value){
                keyword.push(zhuci_keyword[i].value);
                zhuci_array.push(zhuci_keyword[i].value);
            }
        }
        for(i = 0;i < fuci_keyword.length;i++){
            if(fuci_keyword[i].value){
                keyword.push(fuci_keyword[i].value);
                fuci_array.push(fuci_keyword[i].value);
            }
        }
        for (i = 0;i < area.length;i++){
            if (area[i].checked){
                is_bool = false;
                if (i == 1)
                    is_douying = true;
            }
        }
        if (is_bool){
            let div = document.getElementById('setmenu-buy').getElementsByTagName('div')[4];
            div.style = "border-bottom: 1px solid red;";
            return show_after('请先选择平台');
        }
        console.log(keyword);
        if (keyword.length == 0)
            show_after('没有输入关键词');
        $.ajax({
            url:'/index/keyword/info?area_type=' + get_area_type() + '&keyword=' + keyword.join(','),
            type: 'GET', // 请求类型，可以是 'GET' 或 'POST'  
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                let data = res.data,
                    price = 0,
                    string = '';
                for(let i = 0;i < data.length;i++){
                    const item = data[i];
                    price = item.price;
                    console.log(item.keyword);
                    console.log(zhuci_array.includes(item.keyword));
                    console.log(fuci_array.includes(item.keyword));
                    if(zhuci_array.includes(item.keyword)){
                        if (is_douying){
                            if (price > 13333)
                                return show_after(item.keyword + '不符合抖音主词标准,请更换');
                        }else{
                            if (price > 20000)
                                return show_after(item.keyword + '不是主词,请更换');
                        }
                    }
                    if(fuci_array.includes(item.keyword)){
                        if (is_douying){
                            if (price > 4000)
                                return show_after(item.keyword + '不符合抖音副词标准,请更换');
                        }else{
                            if (price > 6000)
                                return show_after(item.keyword + '不是副词,请更换');
                        }
                    }
                }
                return show_after('关键词全部符合标准,可以选择下单');
            }
        });
    }

    function set_amount(){
        let m_selected = [],
            m = document.getElementsByName('keyword_area');
        for(let i = 0;i < m.length;i++){
            if (m[i].checked){
                m_selected.push(m[i].value);
            }
        }
        if (m_selected.length == 1)
            document.getElementById('total-price').innerHTML = message.price;
        else if(m_selected.length == 2)
            document.getElementById('total-price').innerHTML = (message.price * 2);
        else 
            document.getElementById('total-price').innerHTML = 0;
    }

    function setmenu_order_create(){
        let m = document.getElementsByName('keyword_area'),
            m_selected = [],
            selected_list = [],
            selected_data = [],
            zhuci_keyword = document.getElementsByName('zhuci-keyword'),
            fuci_keyword = document.getElementsByName('fuci-keyword');
        for(i = 0;i < zhuci_keyword.length;i++){
            if(zhuci_keyword[i].value){
                selected_list.push(zhuci_keyword[i].value);
        }
        for(i = 0;i < fuci_keyword.length;i++){
            if(fuci_keyword[i].value)
                selected_data.push(fuci_keyword[i].value);
        }
        for(let i = 0;i < m.length;i++){
            if (m[i].checked)
                m_selected.push(m[i].value);
        }
        if (selected_list.length != message.zhuci)return show_after('主词数量未达标');
        if (selected_data.length != message.fuci)return show_after('副词数量未达标');
        if (hasDuplicates(selected_list))
            return show_after('主词内有重复,请检查');
        if (hasDuplicates(selected_data))
            return show_after('副词内有重复,请检查');
        console.log(hasDuplicates(selected_list));
        console.log(hasDuplicates(selected_data));
        $.ajax({
            url:'/index/order/setmenu_create',
                type: 'POST', // 请求类型，可以是 'GET' 或 'POST'  
                data:{message:message,keyword_area:m_selected,zhuci:selected_list,fuci:selected_data},
                dataType: 'json', // 预期服务器返回的数据类型  
                success: function(res) {
                    if (res.code == 200){
                        location.href = '/index/order/find?order_no=' + res.data.order_no;
                    }else{
                        show_after(res.msg);
                    }
                }
            });
        }
    }
    function hasDuplicates(arr) {
        const seen = new Map();
        for (const item of arr) {
            if (seen.has(item)) {
                return true;
            }
            seen.set(item, true);
        }
        return false;
    }
</script>
</html>